<template>
    <div class="ShoppingCart" style="">

        <el-container>
            <el-header>我的购物车</el-header>

            <el-main style="width: 800px"
            >


                <div v-for='(index,data) in part_data.length ' :key="index">
                    <transition name="el-zoom-in-center">
                        <CartCard :index=index-1 :data_name=data_name :page=page :page_count=page_count v-on:part_data_changed = "change_part_data($event)"></CartCard>
                    </transition>
                </div>

                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="总价">
                        <el-input v-model=sum_price placeholder="总价" :disabled="true"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="dialogVisible = true">付款</el-button>
                        <el-dialog
                                title="提示"
                                :visible.sync="dialogVisible"
                                width="300px"
                                :before-close="handleClose">
                            <span> 确认付款</span>
                            <span slot="footer" class="dialog-footer">
                                 <el-select v-model="value" placeholder="收货地址">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                              </el-select>

                                <el-select v-model="value1" placeholder="支付方式">
                                <el-option
                                        v-for="item in options1"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                              </el-select>



                                <el-select v-model="value2" placeholder="物流">
                                <el-option
                                        v-for="item in options2"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                              </el-select>
                                <br>

                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="submit">确 定</el-button>


                            </span>
                        </el-dialog>
                    </el-form-item>
                </el-form>


            </el-main>


            <el-footer>
                <el-pagination
                        layout="prev, pager, next"
                        :total=total
                        :page-count=page_count
                        @current-change="change_page"

                >
                </el-pagination>
            </el-footer>
        </el-container>


    </div>

</template>

<script>
    // @ is an alias to /src

    import CartCard from "../components/CartCard";
    import Pagination from '@/components/Pagination.vue'
    import {mapState} from 'vuex'

    export default {

        name: 'ShoppingCart',
        data() {
            return {
                data_name: "ShoppingCart_",
                dialogVisible: false,
                part_data: [],
                page_count: 10,
                page: 1,
                options: [{
                    value: '选项1',
                    label: '常用地址'
                }, {
                    value: '选项2',
                    label: '地址2'
                }, {
                    value: '选项3',
                    label: '地址3'
                }, {
                    value: '选项4',
                    label: '地址4'
                }, {
                    value: '选项5',
                    label: '地址5'
                }],
                options1: [{
                    value: '选项1',
                    label: '微信'
                }, {
                    value: '选项2',
                    label: '支付宝'

                }],
                options2: [{
                    value: '选项1',
                    label: '顺丰快递'
                }, {
                    value: '选项2',
                    label: '圆通快递'

                }],
                value: '',
            value1: '',
                value2: '',
            }
        },
        components: {
            CartCard,
            Pagination
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {

                        done();

                    })
                    .catch(_ => {
                    });
            },
            submit() {
                this.dialogVisible = false
                this.$store.state.ShoppingCart = []
                this.$notify({
                    title: '提示',
                    message: '付款成功',
                    type: 'success'
                })
            },
            change_page(page) {
                this.page = page
                const tail = this.page_count * page
                this.part_data = this.ShoppingCart.slice(tail - this.page_count, tail)


            },
            change_part_data(index){
                this.part_data.splice(index,1)
            }


        },

        created() {
            this.change_page(1)

        },
        computed: {
            ...mapState(['ShoppingCart']),
            sum_price() {
                var sum = 0
                for (var i = 0; i < this.ShoppingCart.length; i++) {
                    sum += Number(this.ShoppingCart[i].price)
                }
                return sum
            },
            total() {
                return this.ShoppingCart.length
            }

        }
    }
</script>
